<!-- 置顶公告栏 -->

<!-- 小鸽子   8月20号 -->
<template>
	<view @tap.stop=''>
		<view>
			<text @tap.stop="appearShade">{{datas.title}}</text>
		</view>

		<view class="shade" v-if="isShow">
			<view class="announceBox">

				<view class="announceTitle">
					<text class="inxupt inxupttubiao32"></text>
					<text class="titleText">
						{{datas.top?'置顶公告':'最新公告'}}
					</text>
				</view>
				<view class="announceContent">

					<view class="Content_box">
						<view class="contentTitle">
							<text>{{datas.title}}</text>
						</view>
						<view :class="content.mediaUrl?'contentText':'contentTextFalse'">
							<text>{{content.body}}</text>
						</view>
						<view class="contentImage" v-show="content.mediaUrl">
							<image :src="content.mediaUrl" @tap.stop='previewImg(content.mediaUrl)' mode="aspectFill"></image>
						</view>
					</view>
					<view class="contentButton">
						<button type="primary" @tap.stop="disappearShade">我知道了</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		_ajax
	} from '../../in-xupt-functions.js'
	export default {
		data() {
			return {
				isShow: false,
				content: {
					body: '',
					mediaUrl: ''
				}
			}
		},
		methods: {
			previewImg: function(logourl){
				var that=this;
				var imgsArray = [];
				imgsArray[0] = logourl;
				uni.previewImage({
					current:0,
					urls:imgsArray
				})
			},
			appearShade() {
				this.isShow = !this.isShow;
				_ajax({
					url: '/circle/announcement/' + this.datas.id,
					method: 'GET'
				}).then(res => {
					this.content.body = res.data.data.body
					this.content.mediaUrl = res.data.data.mediaUrls[0]
					console.log(res)
				})
			},
			disappearShade() {
				this.isShow = false;
			},
		},
		props: ["datas"]
	}
</script>

<style lang="less">
	.prevent{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.shade {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 9999;

		.announceBox {
			position: fixed;
			top: 25%;
			left: 13%;
			width: 76%;
			// height: 48%;
			background-color: rgb(199, 199, 199);
			border-radius: 24rpx;

			.announceTitle {
				background-color: rgb(255, 255, 255);
				height: 72rpx;
				border-radius: 24rpx 24rpx 0 0;
				line-height: 70rpx;
				margin-bottom: 3rpx;

				.inxupttubiao32 {
					color: #f76b8a;
					position: relative;
					top: 0%;
					left: 4%;
				}

				.titleText {
					position: relative;
					top: 2%;
					left: 7%;
					font-size: 32rpx;
				}
			}

			.announceContent {
				// height: 94%;
				background-color: rgb(255, 255, 255);
				padding-bottom: 20rpx;
				border-radius: 0 0 24rpx 24rpx;

				.Content_box {
					width: 92%;
					// height: 85%;
					margin: 0 auto;

					.contentTitle {
						padding: 6rpx 0;
						font-weight: 600;
						font-size: 28rpx;
					}

					.contentText {
						font-size: 32rpx;
						padding-top: 4rpx;
						width: 100%;
						// height: 30%;
						overflow: auto;
					}

					.contentTextFalse {
						font-size: 32rpx;
						padding-top: 4rpx;
						width: 100%;
						// height: 60%;
						// height: 60rpx;
						min-height: 50rpx;
						max-height: 300rpx;
						overflow: auto;
					}

					.contentImage {
						width: 60%;
						// height: 59%;
						height: 420rpx;
						margin: 6rpx auto;
						overflow: auto;

						image {
							width: 100%;
							height: 95%;
						}
					}

				}

				.contentButton {
					position: relative;
					bottom: 0%;
					left: 4%;
					width: 93%;
					height: 68rpx;
					border-radius: 16rpx;
					background-color: #d9cc36;
					text-align: center;

					button {
						width: 100%;
						height: 100%;
						line-height: 76rpx;
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>
